"use client";
import PrimaryList from "@/components/List";
import React, { ChangeEventHandler, useEffect, useState } from "react";
import { TVideoData } from "@/app/Course/page";
import { addVideo, delVideo, getOwnVideo } from "@/api";
import { useRouter } from "next/navigation";
import { Modal, Select, message } from "antd";
import CourseModal from "../CourseModal";
import CourseMenu from "../CourseMenu";

const MyCourse = () => {
  const [subjectId, setSubjectId] = useState(0);
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState(0);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isCourseOpen, setIsCourseOpen] = useState(false);
  const [courseName, setCourseName] = useState("");
  const [videoUrl, setVedioUrl] = useState<string>("");
  const [vedioData, setVedioData] = useState<TVideoData[]>();
  const [videoStatus, setVideoStatus] = useState<string | number>("");
  const [contentCourse, setContentCourse] = useState("");
  const router = useRouter();
  // 添加课程
  const handleAddCourse = (id: number, e: any) => {
    e.stopPropagation();
    setIsModalOpen(true);
    setSubjectId(id);
  };
  const handleClick = (id: number) => {
    router.push(`/VedioContentView?videoId=${id}`);
  };
  const handleEdite = (id: number, e: any) => {
    e.stopPropagation();
    router.push(`/PublishCourse?videoId=${id}`);
  };
  const handleDelete = async (id: number, e: any) => {
    e.stopPropagation();
    const res = await delVideo({ subjectIds: id });
    if (res.data.code === 200) {
      message.success("删除成功");
      getList();
    } else {
      message.error("删除失败");
    }
  };
  // 添加课程确认操作
  const handleOk = async () => {
    const res = await addVideo({
      subjectId,
      videoName: courseName,
      videoLink: videoUrl,
      richText: contentCourse,
      // cause: contentCourse,
    });
    if (res.data.code === 200) {
      setIsModalOpen(false);
      setContentCourse("");
      setCourseName("");
      message.success("添加成功");
      getList();
    }
  };
  //添加课程取消操作
  const handleCancel = () => {
    setIsModalOpen(false);
    setCourseName("");
    setContentCourse("");
    setVedioUrl("");
  };
  const getList = async (pageNum: number = 1, pageSize: number = 10) => {
    setLoading(true);
    const res = await getOwnVideo({
      pageNum,
      pageSize,
      videoStatus,
    });
    if (res.data.code === 200) {
      setVedioData(res.data.data.records);
      setTotal(res.data.data.total);
      setLoading(false);
    }
  };
  const handleSelectChange = (value: number | string) => {
    setVideoStatus(value);
  };
  const handleCheckCourse = (id: number, e: any) => {
    e.stopPropagation();
    setSubjectId(id);
    setIsCourseOpen(true);
  };
  const onCancel = () => {
    setIsCourseOpen(false);
    setCourseName("");
    setVedioUrl("");
  };
  // 富文本框内容
  const handleChangeValue = (value: string) => {
    setContentCourse(value);
  };
  useEffect(() => {
    getList();
  }, [videoStatus]);
  return (
    <div>
      <Select
        defaultValue={""}
        style={{ width: 120, margin: "10px 5px" }}
        onChange={handleSelectChange}
        options={[
          { value: "", label: "全部" },
          { value: 0, label: "待审核" },
          { value: 1, label: "审核通过" },
          { value: 2, label: "审核未通过" },
        ]}
      />
      <PrimaryList
        handleClick={handleClick}
        loading={loading}
        total={total}
        vedioData={vedioData}
        getList={getList}
        isShowStatus={true}
        handleEdite={handleEdite}
        isShowOnnwerAndTime={false}
        handleDelete={handleDelete}
        handleAddCourse={handleAddCourse}
        handleCheckCourse={handleCheckCourse}
      ></PrimaryList>
      <CourseModal
        open={isModalOpen}
        courseName={courseName}
        setCourseName={setCourseName}
        onCancel={handleCancel}
        onOk={handleOk}
        setVedioUrl={setVedioUrl}
        videoUrl={videoUrl}
        handleChangeValue={handleChangeValue}
        contentCourse={contentCourse}
      ></CourseModal>
      <CourseMenu
        isOpen={isCourseOpen}
        onCancel={onCancel}
        subjectId={subjectId}
      ></CourseMenu>
    </div>
  );
};
export default MyCourse;
